<template>
  <div class="page subpage">
    <!-- <button @click="$router.back()">返回</button> -->
    <header>
      <i class="iconfont icon-fanhui" @click="$router.back()"></i>
      <p>网易严选</p>
      <i class="iconfont icon-fangdajing"></i>
      <i class="iconfont icon-gouwuche"></i>
    </header>
    <!-- 商品列表导航 -->
    <div class="navigation">
      <span v-for="(item, index) in this.name" :key="index">{{ item.name }}</span>
    </div>
    <!-- 列表标题 -->
    <p class="title">{{ this.title }}</p>
    <!-- 商品列表 -->
    <div class="shoplists">
      <div class="shop-List" v-for="(item, index) in this.lists" :key="index">
        <!-- 图片 -->
        <router-link :to="{ name: 'c1-detail', params: { id: item.id } }">
          <img class="img1" :src="item.listPicUrl" alt="">
        </router-link>
        <!-- 图标+标题 -->
        <div class="List-title">
          <img :src="item.preLogo.length ? item.preLogo[0].logoUrl : ''" alt=""
            :class="{ 'active': !item.preLogo.length, 'img2': item.preLogo.length && item.preLogo[0].height == 30 }">
          <img class="img2" :src="item.preLogo.length == 2 ? item.preLogo[1].logoUrl : ''" alt=""
            :class="{ 'active': !(item.preLogo.length == 2) }">
          <span class="List-span">{{ item.name }}</span>
        </div>
        <!-- 可用红包 -->
        <div class="red-bag" v-show="item.itemTagList.length">
          <img src="https://yanxuan.nosdn.127.net/static-union/166909947513c0c8.png" alt="">
          <span>{{ item.itemTagList.length ? item.itemTagList[0].name : '' }}</span>
        </div>
        <!-- 现价 -->
        <div class="current-price">
          <span>{{ item.finalPriceInfoVO.priceInfo.finalPrice ? item.finalPriceInfoVO.priceInfo.finalPrice.prefix : ''
          }}￥</span>
          <span>{{ item.finalPriceInfoVO.priceInfo.finalPrice ? item.finalPriceInfoVO.priceInfo.finalPrice.price :
            item.finalPriceInfoVO.priceInfo.basicPrice
          }}</span>
        </div>
        <!-- 原价 -->
        <div class="original-price" :class="{ 'active': item.finalPriceInfoVO.priceInfo.counterPrice == null }">
          <span>￥</span>
          <span>{{ item.finalPriceInfoVO.priceInfo.counterPrice }}</span>
        </div>
        <!-- 优惠 -->
        <div class="discounts" :class="{ 'bg': item.finalPriceInfoVO.banner && item.finalPriceInfoVO.banner.title }">
          <span>{{ item.finalPriceInfoVO.banner ? item.finalPriceInfoVO.banner.title : '' }}</span>
          <span :class="{ 'bg1': item.finalPriceInfoVO.banner && item.finalPriceInfoVO.banner.content !== '正在抢购中' }">{{
            item.finalPriceInfoVO.banner ? item.finalPriceInfoVO.banner.content : '' }}</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import axios from 'axios'
import '../assets/css/GoodsList.css'
import '../assets/iconfont/iconfont.css'
// import '../assets/css/base.css'
export default {
  data() {
    return {
      name: [],
      title: '',
      lists: []
    };
  },
  async created() {
    try {
      const res = await axios.get(`/item/list.json?csrf_token=488a4e0e372cb731535522b4baf07040&__timestamp=1682844150830&categoryId=${this.$route.params.id}&subCategoryId=${this.$route.params.subCategoryId}&categoryType=0`)
      this.name = res.data.data.categoryL2List
      this.title = res.data.data.categoryItems.category.frontName;
      this.lists = res.data.data.categoryItems.itemList;
      // console.log(this.lists);
    } catch (error) {
      console.error(error);
    }
  },
  mounted() {
    let page = document.querySelector('#container .page');
    page.style.bottom = '0px'
    page.style.display = 'block'
  },

}
</script>

<style scoped>
/*  */
</style>